/**
 * 统一主题配置
 * @description 定义全局的颜色、渐变、阴影等主题样式，支持动态主题切换
 */

// ================================
// CSS变量定义 (支持动态主题)
// ================================

:root {
  // 默认主题变量 (赛博朋克)
  --theme-primary: #667eea;
  --theme-secondary: #764ba2;
  --theme-accent: #00f5ff;
  --theme-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --theme-background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
  --theme-surface: rgba(255, 255, 255, 0.05);
  --theme-text-primary: #ffffff;
  --theme-text-secondary: rgba(255, 255, 255, 0.8);
  --theme-text-tertiary: rgba(255, 255, 255, 0.6);
  --theme-border: rgba(255, 255, 255, 0.1);
  --theme-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
}

// ================================
// 动态主题变量 (优先使用CSS变量)
// ================================

// 主色调 - 使用CSS变量，支持动态切换
$primary-color: var(--theme-primary, #667eea);
$secondary-color: var(--theme-secondary, #764ba2);
$accent-color: var(--theme-accent, #00f5ff);

// 渐变色 - 动态主题渐变
$primary-gradient: var(--theme-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));

// 背景色 - 动态主题背景
$bg-gradient: var(--theme-background, linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%));
$surface-color: var(--theme-surface, #ffffff);

// 文本颜色 - 动态主题文本
$text-primary: var(--theme-text-primary, #262626);
$text-secondary: var(--theme-text-secondary, #595959);
$text-tertiary: var(--theme-text-tertiary, #8c8c8c);

// 边框和阴影 - 动态主题边框
$border-color: var(--theme-border, #e8e8e8);
$card-shadow: var(--theme-shadow, 0 4rpx 16rpx rgba(0, 0, 0, 0.08));

// ================================
// 静态颜色配置 (不受主题影响)
// ================================

// 状态颜色 - 保持固定
$success-color: #56d364;
$warning-color: #ffd93d;
$danger-color: #ff6b6b;
$info-color: #1890ff;

// 状态渐变
$success-gradient: linear-gradient(135deg, #56d364 0%, #7dd87f 100%);
$warning-gradient: linear-gradient(135deg, #ffd93d 0%, #ffb347 100%);
$danger-gradient: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
$info-gradient: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);

// 固定中性色 (备用)
$text-quaternary: #bfbfbf;
$border-light: #f0f0f0;
$divider-color: #e8e8e8;
$bg-color: #ffffff;
$bg-secondary: #fafafa;
$bg-tertiary: #f5f5f5;

// 兼容性变量 (保持向后兼容)
$primary-gradient-light: linear-gradient(135deg, #8fa4f3 0%, #a8b5f5 100%);
$primary-gradient-dark: linear-gradient(135deg, #4c63d2 0%, #5a4fcf 100%);
$secondary-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
$card-gradient: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);

// 其他兼容性颜色
$primary-light: #8fa4f3;
$primary-dark: #4c63d2;

// ================================
// 全局主题样式和动画
// ================================

// 全局应用样式
#app {
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.3s ease, color 0.3s ease;
  min-height: 100vh;
  background: var(--theme-background);
  color: var(--theme-text-primary);
  will-change: opacity, transform;
}

// 页面进出基础动画（兼容H5/小程序/App）
.page-enter-active,
.page-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.page-enter-from,
.page-leave-to {
  opacity: 0.01;
  transform: translate3d(0, 6rpx, 0);
}

// 主题切换时的平滑过渡 - 兼容小程序环境
// #ifdef H5
view,
text,
button,
input,
textarea,
image,
scroll-view,
swiper,
swiper-item,
navigator,
picker,
picker-view,
picker-view-column,
slider,
switch,
audio,
video,
camera,
live-player,
live-pusher,
map,
canvas,
web-view,
ad,
official-account,
open-data,
rich-text,
movable-area,
movable-view,
cover-view,
cover-image {
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

// #endif

// 小程序环境下的简化过渡
// #ifdef MP-WEIXIN || APP-PLUS
view,
text,
button {
  transition: color 0.3s ease, background-color 0.3s ease;
}

// #endif

// 主题类样式定义
.theme-cyber {
  color-scheme: dark;
}

.theme-neon {
  color-scheme: dark;
}

.theme-ocean {
  color-scheme: dark;
}

.theme-sunset {
  color-scheme: dark;
}

.theme-forest {
  color-scheme: dark;
}

.theme-galaxy {
  color-scheme: dark;
}

.theme-light {
  color-scheme: light;
}

.theme-dark {
  color-scheme: dark;
}

// ================================
// 阴影配置
// ================================

$shadow-light: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
$shadow-medium: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
$shadow-heavy: 0 8rpx 32rpx rgba(0, 0, 0, 0.18);

// 卡片阴影
$card-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
$card-shadow-hover: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);

// ================================
// 圆角配置
// ================================

$border-radius-small: 8rpx;
$border-radius-medium: 12rpx;
$border-radius-large: 16rpx;
$border-radius-xl: 24rpx;

// ================================
// 间距配置
// ================================

$spacing-xs: 8rpx;
$spacing-sm: 16rpx;
$spacing-md: 24rpx;
$spacing-lg: 32rpx;
$spacing-xl: 48rpx;
$spacing-xxl: 64rpx;

// ================================
// 字体配置
// ================================

$font-size-xs: 20rpx;
$font-size-sm: 24rpx;
$font-size-md: 28rpx;
$font-size-lg: 32rpx;
$font-size-xl: 36rpx;
$font-size-xxl: 40rpx;

$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 600;

// ================================
// 动画配置
// ================================

$transition-fast: 0.2s ease;
$transition-normal: 0.3s ease;
$transition-slow: 0.5s ease;

// ================================
// 混合器 (Mixins)
// ================================

// 渐变背景混合器
@mixin gradient-bg($gradient: $primary-gradient) {
  background: $gradient;
}

// 卡片样式混合器
@mixin card-style($shadow: $card-shadow, $radius: $border-radius-medium) {
  background: $bg-color;
  border-radius: $radius;
  box-shadow: $shadow;
  overflow: hidden;
}

// 按钮样式混合器
@mixin button-style($gradient: $primary-gradient, $radius: $border-radius-medium) {
  @include gradient-bg($gradient);
  border-radius: $radius;
  border: none;
  color: #ffffff;
  font-weight: $font-weight-medium;
  transition: all $transition-normal;

  &:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}

// 文本省略混合器
@mixin text-ellipsis($lines: 1) {
  @if $lines ==1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

// 居中布局混合器
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 响应式网格混合器
@mixin grid-responsive($columns: 2, $gap: $spacing-md) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
}